<template>
	<view class="beijingse1">
		<view class="dbtup">
			<image src="../static/image/system/ceonjt.png" mode=""></image>
		</view>
		<view class="block">
			<view class="baibox ffffff margin_top4" v-for="(item,index) in list" :key="item.id">
				<view class="flexleft" :class="item.is_get?'jdbox':'jdbox1'">
					<view class="jdbtn flexcenter margin_right6">阶段{{index+1}}</view>
					<view class="sanshier fonweight xiaobai">{{item.name}}</view>
				</view>
				<view class="margin_top2">
					<view class="flextops margin_top" v-for="(ite,ind) in item.zniteminfo" :key="ite.id">
						<view class="szbtn flexcenter margin_right1">{{ind+1}}</view>
						<view class="ershiba xiaohei yhxk" style="width: 80%;">{{ite.title}}</view>
					</view>
				</view>
				<view class="flexcenter margin_top4" v-if="item.is_get">
					<view class="flexcenter ckbtn" @click="tzckxq(item.id)">查看详情</view>
				</view>
				<view class="textcenter margin_top4 ershiba xiaohong" v-if="item.is_get==0">{{item.des}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list:[]
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			init(){
				httpRequest.request('/api/user/userstarznIndex', 'GET', {
				}).then(res => {
					this.list = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			
			// 跳转查看详情
			tzckxq(id) {
				uni.navigateTo({
					url: '/pages_mypage/ceochakanxq?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.block {
		padding:10rpx 45rpx 30rpx;
		background-color: #F9EBCD;
	}
.beijingse1 {
        background: #F9EBCD;
		min-height:calc(100vh - 100rpx);
		height: auto;
	}
	.dbtup {
		width: 100%;
		height: 387rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ckbtn {
		width: 260rpx;
		height: 68rpx;
		background: linear-gradient(85deg, rgba(255, 182, 127, .1) 0%, rgba(255, 147, 65, .1) 100%);
		border-radius: 73rpx 73rpx 73rpx 73rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	.szbtn {
		width: 38rpx;
		height: 38rpx;
		background: rgba(255, 147, 65, .1);
		border-radius: 50%;
		font-size: 20rpx;
		font-family: DIN, DIN;
		font-weight: bold;
		color: #FF9341;
	}

	.jdbtn {
		width: 128rpx;
		height: 43rpx;
		background-color: rgba(255, 255, 255, .1);
		border-radius: 42rpx;
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.jdbox1 {
		padding: 13rpx 24rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/jdh.png');
	}

	.jdbox {
		padding: 13rpx 24rpx;
		background-size: 100% 100%;
		background-image: url('../static/image/system/jd.png');
	}


	.baibox {
		border-radius: 30rpx 30rpx 30rpx 30rpx;
		padding: 0 30rpx 38rpx 44rpx;
	}

	.beijtu {
		padding: 197rpx 60rpx 136rpx 60rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		background-image: url('https://solarmini.yuntaiqi.com/uploads/20240109/41f08f575b495abab1e06ed49b445a45.png');
	}
</style>